<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('潜在客户管理')"/>
    <style>
    </style>
</head>
<body class="hold-transition skin-black sidebar-mini">
<div class="wrapper">
    <th:block th:include="include :: navbar"/>
    <th:block th:include="include :: menu('customer')"/>
    <div class="content-wrapper">
        <section class="content-header">
            <h1>潜在客户管理</h1>
        </section>
        <section class="content">
            <div class="box">
                <!--高级查询--->
                <div style="margin: 10px;">
                    <form class="form-inline" id="searchForm" action="/customer/potentialCustomer" method="post">
                        <input type="hidden" name="currentPage" id="currentPage" value="1">
                        <div class="form-group">
                            <label for="keyword">关键字:</label>
                            <input type="text" class="form-control" id="keyword" name="keyword" placeholder="请输入姓名或电话"
                                   th:field="${qo.keyword}">
                        </div>
                        <div class="form-group">
                            <label for="sellerId"> 市场专员:</label>
                            <select class="form-control" id="sellerId" name="sellerId">
                                <option value="">全部</option>
                                <option th:each="item:${sellers}" th:value="${item.id}" th:text="${item.name}"
                                        th:selected="${qo.sellerId eq item.id}"></option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span>
                            查询
                        </button>
                        <a href="#" class="btn btn-success btn-input">
                            <span class="glyphicon glyphicon-plus"></span> 添加
                        </a>
                    </form>
                </div>
                <div class="box-body table-responsive ">
                    <table class="table table-hover table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>电话</th>
                            <th>qq</th>
                            <th>职业</th>
                            <th>来源</th>
                            <th>销售员</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="item:${pageInfo?.list}">
                            <td th:text="${(qo.currentPage-1)*qo.pageSize+(itemStat.index+1)}"></td>
                            <td th:text="${item.name}"></td>
                            <td th:text="${item.age}"></td>
                            <td th:switch="${item.gender}">
                                <span th:case="0">女</span>
                                <span th:case="1">男</span>
                            </td>
                            <td th:text="${item.tel}"></td>
                            <td th:text="${item.qq}"></td>
                            <td th:text="${item?.job?.title}"></td>
                            <td th:text="${item?.source?.title}"></td>
                            <td th:text="${item?.seller?.name}"></td>
                            <td th:if="${item.status == 0}">流失</td>
                            <td th:if="${item.status == 1}">开发失败</td>
                            <td th:if="${item.status == 2}">潜在客户</td>
                            <td th:if="${item.status == 3}">正式客户</td>
                            <td th:if="${item.status == 4}">资源池客户</td>
                            <td>
                                <a href="#" class="btn btn-info btn-xs btn-input" th:data-option="${item.toJson()}">
                                    <span class="glyphicon glyphicon-pencil"></span> 编辑
                                </a>
                                <a href="#" class="btn btn-primary btn-xs btn-follow" th:data-option="${item.toJson()}">
                                    <span class="glyphicon glyphicon-pencil"></span> 跟进
                                </a>
                                <a href="#" class="btn btn-warning btn-xs btn_turnover" th:data-option = "${item.toJson()}">
                                    <span class="glyphicon glyphicon-pencil"></span> 移交
                                </a>
                                <a href="#" class="btn btn-danger btn-xs btn-updateStatus" th:data-option="${item.toJson()}">
                                    <span class="glyphicon glyphicon-pencil"></span> 修改状态
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <!--分页-->
                    <th:block th:include="include :: page"/>
                </div>
            </div>
        </section>
    </div>
</div>

<script>
    $(function () {
        // 打开添加模态窗口
        $(".btn-input").click(function () {
            $("#name").val("");
            $("input[name='id']").val("");
            $("#age").val("");
            $("#gender").val("");
            $("#tel").val("");
            $("#qq").val("");
            $("#jobId").val("");
            $("#sellerId2").val("");
            $("#inputUserId").val("");
            $("#inputTimeDate").val("");
            $("#sourceId").val("");
            $("#status").val("");
            var data = $(this).data("option");
            if (data) {
                $("input[name='id']").val(data.id);
                $("#name").val(data.name);
                $("#age").val(data.age);
                $("#gender").val(data.gender);
                $("#tel").val(data.tel);
                $("#qq").val(data.qq);
                $("#jobId").val(data.jobId);
                $("#sellerId2").val(data.sellerId);
                $("#inputUserId").val(data.inputUserId);
                $("#sourceId").val(data.sourceId);
                $("#inputTimeDate").val(data.inputTime);
                $("#status").val(data.status);
            }
            $("#modal1").modal('show');
        });
    })
</script>

<!--新增/编辑客户的模态窗口-->
<div class="modal fade" tabindex="-1" role="dialog" id="modal1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增/编辑客户资料</h4>
            </div>
            <form action="/customer/saveOrUpdate" method="post">
                <input type="hidden" name="id" id="id">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">姓名:</label>
                        <input type="text" class="form-control" name="name" id="name" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label for="age">年龄:</label>
                        <input type="text" class="form-control" name="age" id="age" placeholder="请输入年龄">
                    </div>
                    <div class="form-group">
                        <label for="gender"> 性别:</label>
                        <select class="form-control" id="gender" name="gender">
                            <option value="">请选择</option>
                            <option value="1" th:selected="${gender=='1'}">男</option>
                            <option value="0" th:selected="${gender=='0'}">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="tel">电话:</label>
                        <input type="text" class="form-control" name="tel" id="tel" placeholder="请输入电话">
                    </div>
                    <div class="form-group">
                        <label for="qq">qq:</label>
                        <input type="text" class="form-control" name="qq" id="qq" placeholder="请输入qq">
                    </div>
                    <div class="form-group">
                        <label for="jobId">职业:</label>
                        <select class="form-control" id="jobId" name="jobId">
                            <option value="">请选择</option>
                            <option th:each="item:${jobs}" th:value="${item.id}" th:text="${item.title}"></option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="sourceId">来源:</label>
                        <select class="form-control" id="sourceId" name="sourceId">
                            <option value="">请选择</option>
                            <option th:each="item:${sources}" th:value="${item.id}"
                                    th:text="${item.title}"></option>
                        </select>
                    </div>
                    <input type="hidden" name="sellerId" id="sellerId2">
                    <input type="hidden" name="inputUserId" id="inputUserId">
                    <input type="hidden" name="inputTimeDate" id="inputTimeDate">
                    <input type="hidden" name="status" id="status">
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" id="insertCustomer">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<script>
    $(function () {
        // 打开跟进模态窗口
        $(".btn-follow").click(function () {
            var data = $(this).data("option");
            $("input[name='id']").val("");
            $("#traceTime").val("");
            $("#traceDetails").val("");
            $("#remark").val("");
            if (data) {
                $("#customerName-follow").val(data.name);
                $("#customerId1").val(data.id);
            }
            $("#modal3").modal('show');
        });
    })
</script>
<!--跟进客户的模态窗口-->
<div class="modal fade" tabindex="-1" role="dialog" id="modal3">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">跟进记录</h4>
            </div>
            <form action="/customer/followEdit" method="post">
                <input type="hidden" name="id">
                <div class="modal-body">
                    <div class="form-group">
                        <input type="hidden" name="customerId" id="customerId1">
                        <label for="customerName-follow">客户姓名:</label>
                        <input type="text" class="form-control" name="customerName-follow" id="customerName-follow"
                               disabled>
                    </div>
                    <div class="form-group">
                        <label for="traceTime">跟进时间:</label>
                        <input type="Date" class="form-control" name="traceTime" id="traceTime" placeholder="请输入跟进时间">
                    </div>
                    <div class="form-group">
                        <label for="traceDetails">跟进内容:</label>
                        <input type="text" class="form-control" name="traceDetails" id="traceDetails" placeholder="请输入跟进内容">
                    </div>
                    <div class="form-group">
                        <label for="traceTypeId">交流方式:</label>
                        <select class="form-control" id="traceTypeId" name="traceTypeId" >
                            <option value="">请选择</option>
                            <option th:each="item:${traceTypeIds}" th:value="${item.id}" th:text="${item.title}"></option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="traceResult">跟进结果:</label>
                        <select class="form-control" id="traceResult" name="traceResult">
                            <!--                            <option th:each="item:${pageInfoTraceResult}" th:value="${item.id}" th:text="${item.traceResult}">-->
                            <option value="">请选择</option>
                            <option value="3" th:selected="${traceResult=='3'}">优</option>
                            <option value="2" th:selected="${traceResult=='2'}">中</option>
                            <option value="1" th:selected="${traceResult=='1'}">差</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="remark">备注:</label>
                        <textarea type="text" class="form-control" name="remark" id="remark"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="followType">跟进类型:</label>
                        <select class="form-control" id="followType" name="type">
<!--                            <option value="0" th:selected="${followType=='0'}">潜在开发计划</option>
                            <option value="1" th:selected="${followType=='1'}">客户跟进历史</option>-->
                            <option value="">请选择</option>
                            <option th:each="item:${types}" th:value="${item.id}" th:text="${item.title}"></option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" id="updateFollow">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!--btn_turnover-->
<!--移交-->
<script>
    $(function () {
        // 打开移交模态窗口
        $(".btn_turnover").click(function () {
            var data = $(this).data("option");
            $("#newSellerId").val("");
            $("#reason").val("");
            if (data) {
                $("#customerName").val(data.name);
                $("#customerId3").val(data.id);
                $("#oldSellerId").val(data.seller.id);
                $("#oldSeller").val(data.seller.name);
            }
            $("#modal4").modal('show');
        });
    })
</script>
<!--移交客户的模态窗口-->
<div class="modal fade" tabindex="-1" role="dialog" id="modal4">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">移交</h4>
            </div>
            <form action="/customer/transfer" method="post">
                <input type="hidden" name="id">
                <div class="modal-body">
                    <div class="form-group">
                        <input type="hidden" name="customerId" id="customerId3">
                        <label for="customerName">客户姓名:</label>
                        <input type="text" class="form-control" name="customerName" id="customerName" disabled>
                    </div>
                    <div class="form-group">
                        <input type="hidden" name="oldSellerId" id="oldSellerId">
                        <label for="oldSeller">旧营销人员:</label>
                        <input type="text" class="form-control" name="oldSeller" id="oldSeller" disabled>
                    </div>
                    <div class="form-group">
                        <label for="newSellerId">新营销人员:</label>
                        <select class="form-control" id="newSellerId" name="newSellerId">
                            <option value="">请选择</option>
                            <option th:each="item:${employees}" th:value="${item.id}" th:text="${item.name}"></option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="reason">移交原因:</label>
                        <textarea type="text" class="form-control" name="reason" id="reason"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script>
    $(function () {
        // 打开修改客户状态模态窗口
        $(".btn-updateStatus").click(function () {
            var data = $(this).data("option");
            if (data) {
                $("#customerId2").val(data.id);
                $("#customerStatus-name").val(data.name);
                $("#customerStatus").val(data.status);
            }
            $("#modal5").modal('show');
        });

        /*        $("#updateStatus").click(function () {
                    var name = $("#customerStatus-name").val();
                    var status = $("#customerStatus").val();
                    var id = $("input[name='id']").val();
                    $.ajax({
                        url: "/customer/saveOrUpdate",
                        data: {name:name,status:status,id:id},
                        type:"post",
                        success:function () {
                            window.location.reload();
                        }
                    })
                })*/
    })
</script>
<!--修改客户状态的模态窗口-->
<div class="modal fade" tabindex="-1" role="dialog" id="modal5">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改客户状态</h4>
            </div>
            <!--            <form action="/customer/saveOrUpdate" method="post">-->
            <form action="/customer/UpdateCustomerStatus" method="post">
                <input type="hidden" name="id">
                <div class="modal-body">
                    <div class="form-group">
                        <input type="hidden" name="customerId" id="customerId2">
                        <label for="customerStatus-name">姓名:</label>
                        <input type="text" class="form-control" name="name" id="customerStatus-name" disabled>
                    </div>
                    <div class="form-group">
                        <label for="customerStatus">状态:</label>
                        <select class="form-control" id="customerStatus" name="status">
                            <option value="0" th:selected="${customerStatus=='0'}">流失</option>
                            <option value="1" th:selected="${customerStatus=='1'}">开发失败</option>
                            <option value="2" th:selected="${customerStatus=='2'}">潜在用户</option>
                            <option value="3" th:selected="${customerStatus=='3'}">正式用户</option>
                            <option value="4" th:selected="${customerStatus=='4'}">资源池用户</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" id="updateStatus">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<th:block th:include="include :: footer"/>
</body>
</html>
